<template>
  <div class="searchSong">
    <div class="top">
      <svg class="icon" aria-hidden="true" @click="$router.back()">
        <use xlink:href="#icon-fanhui"></use>
      </svg>

      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      />
    </div>

    <!-- 展示历史搜索记录 -->
    <div class="historyShow">
      <div class="historyTop">
        <p>
          <span>搜索历史</span>
          <svg class="icon" aria-hidden="true" @click="clearList">
            <use xlink:href="#icon-shanchu"></use>
          </svg>
        </p>
        <p>查看全部</p>
      </div>

      <div class="historyData">
        <!-- 根据保存搜索结果的数组,渲染历史搜索记录 -->
        <p
          v-for="(item, index) in searchList"
          :key="index"
          @click="getSongs(item)"
        >
          {{ item }}
        </p>
      </div>

      <!-- 展示搜索的返回结果 -->
      <div class="showSongs">
        <ul>
          <li v-for="(item, index) in songsList" :key="index">
            <div class="left" @click="playMusic(index)">
              <p class="num">{{ index + 1 }}</p>
              <p class="info">
                <span>{{ item.name }}</span>
                <span>
                  {{ item.ar[0].name }}
                </span>
              </p>
            </div>
            <div class="right">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhibo"></use>
              </svg>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo1"></use>
              </svg>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import * as searchApi from "@/api/getmusic";
import { mapState, mapMutations } from "vuex";
export default {
  computed:{
    ...mapState(['whichSong'])
  },
  data() {
    return {
      // 搜索的值
      value: "",

      // 保存搜索框输入内容的数组
      searchList: [],

      // 根据关键词返回的数据
      songsList: [],
    };
  },
  mounted() {
    this.searchList = JSON.parse(localStorage.getItem("searchList"));
  },
  methods: {
    ...mapMutations(["GOT_SONGS_DATA", "CHOOSEWHICH",'CHANGE_INDEX']),
    onSearch() {
      this.searchList.unshift(this.value);
      // 数组去重
      this.searchList = [...new Set(this.searchList)];
      // 限制数组长度(添加新的，将数组最末尾的去掉)
      this.searchList.splice(7, 1);

      searchApi.search(this.value).then((res) => {
        this.songsList = res.data.result.songs;
        this.$store.commit("GOT_SONGS_DATA", this.songsList);
      });
      // 将历史记录保存到localstorage
      localStorage.setItem("searchList", JSON.stringify(this.searchList));

      //清空搜索栏
      this.value = "";
    },

    clearList() {
      this.searchList = [];
      this.songsList = [];
    },

    playMusic(index) {
      // console.log(index,this.whichSong);
     if(index==this.whichSong){
        this.CHOOSEWHICH(String(index))
      }else{
        this.CHOOSEWHICH(index)
      }
    },

    getSongs(item) {
      // console.log(item);
      searchApi.search(item).then((res) => {
        this.songsList = res.data.result.songs;
        this.$store.commit("GOT_SONGS_DATA", this.songsList);
        this.$store.commit('CHANGE_INDEX')
      });
    },
  },
};
</script>

<style scoped>
.showSongs ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px;
}

.left {
  display: flex;
  align-items: center;
}
.right {
  display: flex;
  width: 60px;
  justify-content: space-between;
}

.info {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.info span:nth-of-type(1) {
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 220px;
}
.info span:nth-of-type(2) {
  font-size: 12px;
  color: #ccc;
}

.searchSong .top {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.van-search {
  width: 330px;
  text-align: center;
}

.historyTop {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: rgb(186, 94, 94);
}
.historyTop p span {
  margin-right: 10px;
}
.searchSong {
  padding: 15px;
}

.historyData p {
  padding: 0 5px;
  height: 30px;
  background: rgb(238, 220, 103);
  border-radius: 15px;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  display: inline-block;
  margin: 10px;
  color: rgb(8, 88, 237);
}
.historyData {
  display: table;
}
</style>